<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('元数据模板列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style type="text/css">
    table label.error{position: inherit;}select + label.error{z-index:1;right:40px;}
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="formId">
            <div class="select-list">
                <ul>
                    <li>
                        <label>资源目录：</label>
                        <input type="text" th:field="${resources.resourcesName}" readonly style="background-color: white"/>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <form id="form-add" class="form-horizontal m">
        <div>
        </div>
        <div class="row">
            <div class="btn-group-sm" id="toolbar" role="group">
            <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
            <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
                <span style="color: red;float: left">要素中文名/要素英文名为必填项</span>
            </div>
    </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "metadata/metadata";

    $(function() {
        var options = {
            url: ctx + "metadata/metadataElement/list",
            queryParams: queryParams,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "元数据要素",
            pagination: false,
            UniqueId: 'index',
            columns: [{
                checkbox: true
            },
/*
                {
                    field: 'id',
                    title: '主键',
                    visible: false
                },
*/
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='id[%s]' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'elementZh',
                    title: '要素中文名',
                    class: 'is-required',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='elementZh' value='"+value+"' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'elementEn',
                    title: '要素英文名',
                    class: 'is-required',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='elementEn' value='"+value+"' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'minValue',
                    title: '最小值',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='minValue' value='"+value+"'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'maxValue',
                    title: '最大值',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='maxValue' value='"+value+"'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'fillValue',
                    title: '填充值',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='fillValue' value='"+value+"'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'span',
                    title: '跨度',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='span' value='"+value+"'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'isOutParameter',
                    title: '是否输出参数(1-是,0-否)',
                    formatter: function(value, row, index) {
                        value = $.common.isEmpty(value)?'':value;
                        var html = $.common.sprintf("<input class='form-control' type='text' name='isOutParameter' value='"+value+"'>", index, value);
                        return html;
                    }
                }]
        };
        $.table.init(options);
    });

    //数据初始限制条件
    function queryParams(params) {
        var search = $.table.queryParams(params);
        search.metadataId = [[${metadata.id}]];
        return search;
    }

    /* 新增表格行 */
    function addColumn(){
        var row = {
                // id: randomId,
                elementZh: null,
                elementEn: null,
                minValue: null,
                maxValue: null,
                fillValue: null,
                span: null,
                isOutParameter: null
        }
        sub.addColumn(row);
        $("#" + table.options.id).bootstrapTable('load',$("#" + table.options.id).bootstrapTable('getData'));
    }

    function submitHandler () {
        if ($.validate.form("form-add")) {
            var data = $("#form-add").serializeArray();
            var ele = {};var eleList = [];
            if (data.length != 0 && data != null) {
                $.each(data, function (index, value) {
                    if ('index' == value['name']) {
                        ele = {};
                    } else {
                        /*
                    if (value['name'].indexOf('[')!=-1){
                        ele['id'] = value['value'];
                    }else {
*/
                        ele[value['name']] = value['value'];
                        /*
                    }
*/
                        if ('isOutParameter' == value['name']) {
                            eleList.push(ele);
                        }
                    }
                })
            }
            var data = {
                id: [[${metadata.id}]],
                resourcesId: [[${resources.id}]],
                productId: [[${metadata.productId}]],
                oMetadataElementList:eleList
            }
            $.ajax({
                url: prefix+"/add",
                type: "post",
                dataType: "json",
                data: JSON.stringify(data),
                contentType: "application/json",
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                    $.modal.disable();
                },
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successCallback(result);
                }
            })
            // $.operate.save(prefix+"/add",data);
        }
    }
</script>
</body>
</html>
